<template>
  <el-card header="企业信息" class="form-section">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="行业类型" prop="industry">
          <el-select
            v-model="formData.industry"
            placeholder="请选择行业类型"
            filterable
            clearable
            style="width: 100%"
            @focus="handleFocus"
            @blur="handleBlur"
          >
            <el-option
              v-for="item in industryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="企业规模" prop="scale">
          <el-select
            v-model="formData.scale"
            placeholder="请选择企业规模"
            style="width: 100%"
            @focus="handleFocus"
            @blur="handleBlur"
          >
            <el-option label="10人以下" value="1" />
            <el-option label="10-50人" value="2" />
            <el-option label="50-100人" value="3" />
            <el-option label="100-500人" value="4" />
            <el-option label="500人以上" value="5" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted, watch } from 'vue'
  import { customerApi } from '@/api/crm'
  import { ElMessage } from 'element-plus'

  const props = defineProps({
    modelValue: {
      type: Object,
      default: () => ({}),
    },
  })

  const emit = defineEmits(['change'])

  // 直接使用props.modelValue，避免尝试重新赋值整个对象
  const formData = computed(() => props.modelValue)

  // 行业选项 - 从API获取
  const industryOptions = ref<Array<{ value: number; label: string }>>([])
  const loading = ref(false)

  // 防止标签点击事件标记
  const isLabelClicked = ref(false)

  // 从API获取行业选项
  const loadIndustryOptions = async () => {
    if (loading.value) return

    loading.value = true
    try {
      const response = await customerApi.industryOptions()
      console.log('行业选项API返回数据:', response)
      if (response.code === 0 && response.data) {
        industryOptions.value = response.data
        console.log('行业选项列表:', industryOptions.value)
      } else {
        ElMessage.error('获取行业选项失败')
      }
    } catch (error) {
      console.error('获取行业选项失败:', error)
      ElMessage.error('获取行业选项失败')
    } finally {
      loading.value = false
    }
  }

  // 处理标签点击事件
  const handleLabelClick = () => {
    console.log('企业信息标签被点击，标记为标签点击')
    isLabelClicked.value = true

    // 延迟重置标记，给其他事件时间处理
    setTimeout(() => {
      isLabelClicked.value = false
    }, 100)
  }

  // 处理控件聚焦事件
  const handleFocus = (event: any) => {
    console.log('企业信息控件聚焦事件', event)
    if (isLabelClicked.value) {
      console.log('标签点击引起的企业信息控件聚焦事件，已屏蔽')
    }
  }

  // 处理控件失焦事件
  const handleBlur = (event: any) => {
    console.log('企业信息控件失焦事件', event)
  }

  // 监听表单数据变化，当填充数据后重新检查行业字段
  watch(
    () => formData.value.industry,
    (newVal, oldVal) => {
      console.log('行业字段变化:', oldVal, '->', newVal)
      // 如果有值但选项还没加载，则强制加载选项
      if (newVal && industryOptions.value.length === 0) {
        loadIndustryOptions()
      }
    }
  )

  // 监听customer_type变化，确保企业客户时加载行业选项
  watch(
    () => formData.value.customer_type,
    newVal => {
      if (newVal === 2 && industryOptions.value.length === 0) {
        loadIndustryOptions()
      }
    }
  )

  // 组件挂载时加载行业选项
  onMounted(() => {
    loadIndustryOptions()
  })
</script>

<style scoped>
  .form-section {
    margin-bottom: 20px;
  }

  /* 防止标签点击的样式方案 */
  :deep(.el-form-item__label) {
    cursor: default;
    user-select: none;
  }

  /* 选择器标签样式 */
  :deep(.el-select .el-input__inner) {
    user-select: none;
  }
</style>
